<script setup lang="ts">
import { NIcon } from "naive-ui";
import { Person, Wallet, Grid } from "@vicons/ionicons5";
import { RouterLink } from "vue-router";

const route = useRoute();
const selectedKey = ref("/plugin");
const menuOptions = [
  {
    label: () =>
      h(
        RouterLink,
        {
          to: {
            path: "/user"
          }
        },
        { default: () => "主页" }
      ),
    key: "/user",
    icon: renderIcon(Person)
  },
  {
    label: () =>
      h(
        RouterLink,
        {
          to: {
            path: "/plugin"
          }
        },
        { default: () => "插件" }
      ),
    key: "/plugin",
    icon: renderIcon(Grid)
  },
  {
    label: () =>
      h(
        RouterLink,
        {
          to: {
            path: "/donate"
          }
        },
        { default: () => "捐赠" }
      ),
    key: "/donate",
    icon: renderIcon(Wallet)
  }
];
init();
function renderIcon(icon: Component) {
  return () => h(NIcon, null, { default: () => h(icon) });
}
function init() {
  watch(
    () => route.path,
    _path => {
      if (!_path) return;
      selectedKey.value = _path;
    }
  );
}
</script>

<template>
  <div>
    <n-menu
      v-model:value="selectedKey"
      :collapsed-width="64"
      :collapsed-icon-size="22"
      :options="menuOptions"
    />
  </div>
</template>

<style scoped lang="scss"></style>
